<template>
	<view class="order">
		<view class="con" v-for="(item, index) in listArr" v-key="index">
			<view class="top">
				<view class="top1">
					<image src="../../static/aa.png" mode=""></image>
					<view class="top1-1">
						<text>{{item.serviceName}}</text>
						<text class="top1-1con">￥{{item.serviceFee}}</text>
					</view>
				</view>
				<view class="top2">{{orderState(item.serviceStatus)}}</view>

			</view>
			<view class="bottom">
				<u-button size="mini" @click="toorder()">再来一单</u-button>
				<u-button size="mini" @click="evaluate()">评价</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listArr:[]
			}
		},
		onLoad() {
			this.render()
		},
		methods: {
			orderState(e){
				switch (e) {
					case 1:
						return "待付款"
						break;
					case 2:
						return "等待接单"
						break;
					case 3:
						return "已接单"
						break;
					case 4:
						return "服务中"
						break;
					case 5:
						return "已完成"
						break;
					case 6:
						return "交易关闭"
						break;
					case 7:
						return "退款成功"
						break;
					case 8:
						return "退款中"
						break;
					case 9:
						return "退款失败"
						break;
				}
			},
			evaluate(){
				uni.navigateTo({
					url:'../evaluate/evaluate'
				})
			},
			toorder(){
				uni.navigateTo({
					url:'../reservation/reservation'
				})
			},
			//渲染订单管理页面
			render(){
				this.$http({
					url:'/getorder'
				}).then((res)=>{
					console.log(res.data)
					this.listArr=res.data.data
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.con {

		height: 240rpx;
		margin: 15rpx 8rpx;
		border: 1px solid #888;
		border-radius: 10rpx;
		box-shadow: 5rpx 10rpx #ddd;

		.top {
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			border-bottom: 1rpx solid #ddd;
			margin-top: 40rpx;
			margin-left: 20rpx;
			margin-right: 20rpx;

			.top1 {
				display: flex;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				.top1-1 {
					display: flex;
					flex-direction: column;

					.top1-1con {
						color: #fF5f01
					}
				}
			}

			.top2 {

				margin-top: 10rpx;
				color: #999;
			}

		}

		.bottom {
			display: flex;
			justify-content: flex-end;

			u-button {
				margin-top: 25rpx;
				margin-right: 25rpx;
			}
		}
	}
</style>
